<script setup lang="ts">
import { ref } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import skuItem from './components/skuItem';
import { getShopDetail, getShopDeviceList } from '@/app/api/rent';
import { img } from '@/utils/common';
const detail = ref();
const deviceList = ref();
onLoad((option: any) => {
	getDetail(option.id);
});
const getDetail = async (id: string) => {
	let address: any = null;
	let obj: any = { store_id: id };
	if (uni.getStorageSync('location_address')) {
		address = uni.getStorageSync('location_address');
	}
	console.log(address);
	const [longitude, latitude] = address ? [address.longitude, address.latitude] : [null, null];
	if (longitude && latitude) {
		obj.longitude = longitude;
		obj.latitude = latitude;
	}
	console.log(obj);
	let res: any = await getShopDetail({
		...obj
	});
	if (res.data) {
		detail.value = res.data;
		if (detail.value.longitude && detail.value.latitude) {
			obj.longitude = detail.value.longitude;
			obj.latitude = detail.value.latitude;
		}
		getDeviceList(obj);
	}
};
const getDeviceList = async (obj: any) => {
	let res: any = await getShopDeviceList({
		...obj
	});
	if (res.data) {
		deviceList.value = res.data.device_list;
	}
};
</script>
<template>
	<view :style="themeColor()" class="min-h-[100vh] bg-[rgb(247,247,247)] pb-[20rpx] relative z-1">
		<c-header />

		<view class="w-full px-[26rpx] pb-[60rpx] box-border absolute z-3 top-[600rpx] left-0" v-if="detail">
			<view class="h-[300rpx] bg-[#fff] px-[30rpx] py-[40rpx] rounded-[20rpx] box-border">
				<view class="text-[36rpx] text-[#333] mb-[30rpx]">{{ detail.store_name }}</view>
				<view class="text-[24rpx] text-[#000] mb-[20rpx]">联系电话:{{ detail.store_mobile }}</view>
				<view class="text-[24rpx] text-[#000]">营业时间:{{ detail.trade_time }}</view>
				<view class="h-[0.5px] bg-[#D8D8D8] my-[36rpx]"></view>
				<view class="flex justify-between items-center">
					<view class="text-[24rpx] text-[#000]">{{ detail?.full_address }}</view>
					<view class="text-[24rpx] text-[#4A4A4A]" v-if="detail?.distance">{{ detail?.distance }}KM</view>
				</view>
			</view>
			<template v-for="(item, index) in deviceList" :key="`sku${index}`">
				<sku-item :item="item" type="shop" />
			</template>
		</view>
		<view class="w-full h-[750rpx] fixed z-2 top-0 left-0">
			<u-image :src="img(detail.store_logo)" width="100%" height="750rpx" mode="aspectFill" v-if="detail?.store_logo" />
		</view>
	</view>
</template>

<style lang="scss" scoped></style>
<style lang="scss"></style>
